<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.dictGroupShow"
    @close="tableConfig.dictGroupShow = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form ref="formPassword" :rules="rulesDictGroup" :model="formDictGroup" label-width="180px">

      <el-form-item label="字典组名称" prop="name" >
        <el-input v-model.trim="formDictGroup.name"></el-input>
      </el-form-item>
      <el-form-item label="字典组代码" prop="code" >
        <el-input v-model="formDictGroup.code"></el-input>
      </el-form-item>
      <el-form-item label="字典组描述" prop="describe" >
        <el-input v-model.trim="formDictGroup.describe" type="textarea"></el-input>
      </el-form-item>
      <!--<el-form-item label="是否基础数据" prop="baseData">-->
      <!--  <el-radio-group v-model="formDictGroup.baseData">-->
      <!--    <el-radio :label=1>非基础数据</el-radio>-->
      <!--    <el-radio :label=2>基础数据-不可删除-不可修改</el-radio>-->
      <!--    <el-radio :label=3>基础数据-不可删除-可以修改</el-radio>-->
      <!--  </el-radio-group>-->
      <!--</el-form-item>-->
      <el-form-item label="排序" prop="sort" >
        <el-slider
          :marks="marks" :min="0" :max="100" :step="0.1"
          v-model="formDictGroup.sort" show-input>
        </el-slider>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd" v-if="defaultValue.saveUpdSelect !== 'select'">{{defaultValue.title}}</el-button>
      <el-button plain type="primary" @click="tableConfig.dictGroupShow = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>
  import http from '@/utils/http';
  import {clearInvalid} from "../../utils/utils";

  export default {
    name: "DictGroupSaveUpd",
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          dictGroupShow: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 要提交的数据
        formDictGroup: {
          id: null,
          code: null,
          name: null,
          describe: null,
          baseData: 1,
          sort: 99,
        },
        // 排序的默认值
        marks: {
          10: '靠前',
          70: '靠后',
        },
        // 校验
        rulesDictGroup: {
          code: [{ required: true, message: '请输入字典组代码，有且唯一', trigger: 'blur' }],
          name: [{ required: true, message: '请输入字典组名称', trigger: 'blur' }],
          describe: [{ required: true, message: '请输入字典组描述', trigger: 'blur' }],
          baseData: [{ required: true, message: '请选择是否基础数据', trigger: 'change' }],
        },
      }
    },
    methods: {
      /**
       * 是保存还是修改字典组
       */
      toSaveUpd(){
        if (this.defaultValue.saveUpdSelect === 'save'){
          this.saveDictGroup()

        } else if (this.defaultValue.saveUpdSelect === 'upd'){
          this.updDictGroup()

        } else {

        }
      },
      /**
       * 更新字典组
       */
      updDictGroup(){
        clearInvalid(this.formDictGroup)
        http.post("/dict/updDictGroup", this.formDictGroup).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("修改成功");
          this.$emit('getDictGroupListPage', null)
          // 关闭弹出框
          this.initDictGroup()
          this.tableConfig.dictGroupShow = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存字典组
       */
      saveDictGroup(){
        http.post("/dict/saveDictGroup", this.formDictGroup).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("保存成功");
          this.$emit('getDictGroupListPage', null)
          // 关闭弹出框
          this.initDictGroup()
          this.tableConfig.dictGroupShow = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开弹出框之前
       * @param value 保存还是修改or查看,取值有 select \ save \ upd
       * @param obj 如果是修改和查看，则是详细数据,需要赋值
       */
      openPage(value, obj){
        this.defaultValue.saveUpdSelect = value
        if (value === 'save'){
          this.defaultValue.title = '保存字典组'
          this.initDictGroup()

        } else if (value === 'upd'){
          this.defaultValue.title = '修改字典组'
          this.formDictGroup = obj

        } else {
          this.defaultValue.title = '字典组详情'
          this.formDictGroup = obj
        }

        this.tableConfig.dictGroupShow = true
        this.$store.commit('navigationListChange', ['字典配置', this.defaultValue.title])
      },
      /**
       * 初始化字典组
       */
      initDictGroup(){
        this.formDictGroup = {
          baseData: 1,
          sort: 99,
        }
      }
    },
    mounted(){
    },
  }
</script>

<style scoped>

</style>
